<template>
    <div class="left-menu" @mouseleave="noItem()">
        <ul>
            <li v-for="(item,index) in showMainData" 
            :key="index"
            @mouseenter="showItem(index)"
            >
                <span v-for="(d,i) in item.data" :key="i">
                    <!-- <a :href="`/goods_list/${d.name}/1/1`">{{ d.name }}</a> -->
                    <RouterLink :to="`/goods_list/${d.name}/1/1`">{{ d.name }}</RouterLink>
                    <span v-if="i < item.data.length - 1">/</span>
                </span>
            </li>
            <!-- <li>
                <span>
                    <a href="">手机</a>
                    <span>/</span>
                    <a href="">运营商</a>
                    <span>/</span>
                    <a href="数码">数码</a>
                </span>
            </li> -->
        </ul>

        <div class="second-item" v-show="isShowItem">
            <!-- 我是二级菜单 showSecondMenuIndex -->
            <SecondMenu :showSecondMenuIndex = "showSecondMenuIndex"></SecondMenu>
        </div>
    </div>
</template>

<script setup>
    import { ref,onMounted,computed } from 'vue'
    import { getMainMenu } from '@/network/home'
    import SecondMenu from '@/components/home/SecondMenu'

    let leftMenuData = ref([])
    const getleftMenuData = async () => {
        const { data } = await getMainMenu()
        for(let i in data){
            let jsonData = JSON.parse(data[i])
            leftMenuData.value.push(jsonData)
        }
    }
    

    //接口返回数据需要进行加工,基本结构应该是[{index:1,data:[{name,url},{},{},{}]}]
    let showMainData = computed(() => {
        let resultList = []
        let result = {'index':null,'data':[]}
        for(let i in leftMenuData.value) {
            let id = leftMenuData.value[i].main_menu_id
            let data = {"name":leftMenuData.value[i].main_menu_name}

            if(result['index'] == id) {
                result['data'].push(data)
            }else if(result['index'] == null) {
                result['index'] = id
                result['data'].push(data)
            }else {
                resultList.push(result)
                result = {'index':id,'data':[data,]}
                
            }
        }
        resultList.push(result)
        return resultList
    })


    //二级菜单的显示与隐藏
    let isShowItem = ref(false)
    let showSecondMenuIndex = ref()
    //显示二级菜单
    const showItem = (index) => {
        isShowItem.value = true
        showSecondMenuIndex.value = index
    }

    //显示二级菜单
    const noItem = () => {
        isShowItem.value = false
    }


    onMounted(() => {
        getleftMenuData()
    })

</script>

<style lang="less" scoped>
@red:#e2231a;
    .left-menu {
        background-color: #fff;
        width: 190px;
        height:470px;
        position: relative;
        ul {
            
            padding-top: 15px;
            li {                
                padding-left: 15px;
                // padding-top: 5px;
                // padding-bottom: 5px;
                line-height: 25px;
                height: 25px;
                &:hover {
                    cursor: pointer;
                    background-color: #d9d9d9;
                }
                a {
                    font-size: 14px;
                    color: #333;
                    &:hover {
                        cursor: pointer;
                        color: @red;
                    }
                }
            }
        }

        .second-item {
            position: absolute;
            top:0;
            left: 190px;
            z-index: 999;
        }
    }
</style>